<template>
  <view class="container">
    <eui-card :is-shadow="false" is-full>
      <text class="uni-h6">组合框一般用于可以选择也可以输入的表单项。</text>
    </eui-card>
    <eui-section title="基本用法" type="line">
      <view class="example-body">
        <eui-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city"></eui-combox>
        <view class="result-box">
          <text>所选城市为：{{getTetxName(city)}}</text>
        </view>
      </view>
    </eui-section>

    <eui-section title="无边框" subTitle="使用 border = false 取消边框" type="line">
      <view class="example-body">
        <eui-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></eui-combox>
      </view>
    </eui-section>

    <eui-section title="设置无匹配项时的提示语" subTitle="使用 emptyTips 属性设置无匹配项时的提示语" type="line">
      <view class="example-body">
        <eui-combox emptyTips="这里啥都没有" :candidates="candidates" placeholder="请选择所在城市"></eui-combox>
      </view>
    </eui-section>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      candidates: [{value:'',text:''},{value:'1',text:'北京'},{value:'2',text:'南京'},{value:'3',text:'东京'},{value:'4',text:'武汉'},{value:'5',text:'天津'},{value:'6',text:'上海'},{value:'7',text:'海口'}],
      city: ''
    }
  },
  methods: {
    getTetxName(inputVal){
        return this.candidates.find(x=>x.value===inputVal)?.text||'';
    }
  }
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Combox"
  }
}
</route>

<style lang="scss">
.example-body {
  padding: 24rpx;
  background-color: #FFFFFF;
}

.result-box {
  text-align: center;
  padding: 40rpx 0rpx;
  font-size: 32rpx;
}
</style>

